<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="one"></cpn>
        <cpn></cpn>
        <button @click="chilrenclick">按下</button>
    </div>


</body>


<template id="cpns"> 
  <div>
      {{name}}
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {},
        components: {
            cpn: {
                template: '#cpns',
                data() {
                    return {
                        name: '啦啦啦',
                    }
                },
            }
        },
        methods: {
            chilrenclick() {
                //当要获取所有的子组件对象时使用 $chilren              
                console.log(this.$children);

                //当我们要获取其中一个的时候用 $ref
                console.log(this.$refs.one.name);

            },
        },
    })
</script>